<template>
  <div class="notice right-menu-item hover-effect">
      <span @click="toMsg">
<!--        <span style="font-size: 14px">消息中心</span>-->
        <i class="el-icon-message"></i>
        <span v-if="msgNum != 0" class="demo-badge-alone ivu-badge-count">{{
          msgNum
        }}</span>
        <!-- <el-icon @click="openNotice" class="demo-badge" size="18" type="icon iconfont iconnews"></el-icon> -->
      </span>
  </div>
</template>
<script>
  import api from "@/api/userSettings/msg/index";
  export default {
    name:"Bell",
    data() {
      return {
        msgList: [],
        // websocket 实例
        socket: null,
        // Websocket心跳间隔
        heartTimer: null,
        num: 0
      };
    },
    created() {
      this.getUnreadList();
    },
    computed: {
      msgNum() {
        return this.num;
      }
    },
    methods: {
      toMsg() {
        this.$router.push({ path: "/userSettings/msg", query: { readState: 1 } })
      },
      //获取未读通知及列表
      getUnreadList() {
        api.getUnread_count()
          .then(res => {
              this.num = res.data.count;
          })
      },
    },
  };
</script>
<style lang="scss" scoped>
  .notice {
    &:hover {
      background: #f7f7f8;
      cursor: pointer;
    }
    position: relative;
    i {
      font-size: 20px;
      color: #525b69;
      margin-top: 2px;
      vertical-align: middle !important;
    }
  }
  .item {
    background: transparent !important;
  }
  .ivu-badge-count {
    font-family: "Monospaced Number";
    vertical-align: middle;
    position: absolute;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    top: 9px;
    right: 9px;
    height: 18px;
    border-radius: 50%;
    min-width: 18px;
    background: #f47f92;
    border: 1px solid transparent;
    color: #fff;
    line-height: 17px;
    text-align: center;
    padding: 0 4px;
    font-size: 12px;
    white-space: nowrap;
    -webkit-transform-origin: -10% center;
    transform-origin: -10% center;
    z-index: 10;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
  }
</style>
